<template>
  <div class="openOrder">
    <!-- 顶部查询表单 -->
    <div class="openOrderTop">
      <el-form ref="searchForm" :model="queryParam" :inline="true" size="mini">
        <!-- <el-col :span="5"> -->
          <el-form-item label="客户:" prop="customer">
            <el-select clearable filterable style="width:180px" v-model="queryParam.customerInfo">
              <el-option
                :key="index"
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in payCustomerDropdowm"
              ></el-option>
            </el-select>
          </el-form-item>
        <!-- </el-col> -->
        <!-- <el-col :span="5"> -->
          <el-form-item label="结算单编号:">
            <el-input clearable placeholder="请输入结算单编号" size="mini" style="width:180px" v-model="queryParam.billCode"></el-input>
          </el-form-item>
        <!-- </el-col> -->
        <!-- <el-col :span="8"> -->
          <el-form-item label="结算时间:">
            <el-date-picker clearable placeholder="请选择开始时间" style="width:180px" type="datetime" v-model="queryParam.startTime"></el-date-picker>
            -
            <el-date-picker clearable placeholder="请选择结束时间" style="width:180px" type="datetime" v-model="queryParam.endTime"></el-date-picker>
          </el-form-item>
        <!-- </el-col> -->
        <el-form-item>
          <el-button type="primary" plain size="mini" @click="initMainTable">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 主要表格 -->
    <div class="openOrderBox">
      <div class="openOrderLeft" ref="tableH">
        <div class="openTitle">客户结算单列表</div>
        <!-- 按钮组 -->
        <div class="btn">
          <buttonName @clickEvent="clickEvent"></buttonName>
          <!--          <el-button v-if="isAuth('viewBtn')" size="mini" plain type="primary" @click="viewBtn">查看</el-button>-->
          <!--          <el-button v-if="isAuth('addBtn')" size="mini" plain type="primary" @click="addBtn">新增</el-button>-->
          <!--          <el-button v-if="isAuth('editBtn')" size="mini" plain type="primary" @click="editBtn">编辑</el-button>-->
          <!--          <el-button v-if="isAuth('delBtn')" size="mini" plain type="primary" @click="delBtn">删除</el-button>-->
          <!--          <el-button size="mini" plain type="primary" @click="initiateCollect">发起收款</el-button>-->
          <!--          <el-button-->
          <!--            v-if="isAuth('confirmPCollect')"-->
          <!--            size="mini"-->
          <!--            plain-->
          <!--            type="primary"-->
          <!--            @click="confirmPCollect"-->
          <!--          >收款确认-->
          <!--          </el-button>-->
          <!--          <el-button v-if="isAuth('print')" size="mini" plain type="primary" @click="print">导出结算单</el-button>-->
        </div>
        <el-table
          :data="infoTable.data"
          border
          :header-cell-style="{ textAlign: 'center' }"
          highlight-current-row
          @row-click="tableRowClick"
          :height="maxHeight"
        >
          <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
          <el-table-column align="center" label="状态" prop="status" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.status === '已付款' ? '对方已付款' : scope.row.status }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="type" label="费目" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="name" label="结算单名称" show-overflow-tooltip width="120"></el-table-column>
          <el-table-column
            align="center"
            prop="code"
            label="结算单号"
            show-overflow-tooltip
            width="250"
          ></el-table-column>
          <el-table-column
            align="center"
            width="120px"
            prop="payName"
            label="结算对象"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="cmtNo"
            label="委托书编号"
            show-overflow-tooltip
            width="200"
          ></el-table-column>
          <!--          <el-table-column align="center" prop="loadingPlace" label="装货地点" show-overflow-tooltip></el-table-column>-->
          <!--          <el-table-column align="center" prop="unloadPlace" label="收货地点" show-overflow-tooltip></el-table-column>-->
          <el-table-column align="center" prop="weight" label="总重(吨)" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="price" label="费率" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="totalPrice" label="金额(元)" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="remark" label="备注" show-overflow-tooltip></el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            class="pagination"
            small
            background
            @size-change="infoTypeHandleSizeChange"
            @current-change="infoTypeHandleCurrentChange"
            :current-page="infoTable.pageInfo.index"
            :page-sizes="Pagination.pageSizeList"
            :page-size="infoTable.pageInfo.size"
            :layout="Pagination.layout"
            :total="infoTable.pageInfo.total"
          ></el-pagination>
        </div>
        <!-- </el-tab-pane>
        </el-tabs>-->
      </div>
    </div>
    <!-- 服务费 -->
    <infoDialog :info="infoDialogData" @dialogClose="dialogClose"></infoDialog>
    <!-- 查看 -->
    <viewDialog :info="viewDialogData" @dialogClose="dialogClose"></viewDialog>
    <!-- 运输费 -->
    <wayInfoDialog :info="wayInfoDialogData"></wayInfoDialog>
  </div>
</template>

<script>
import paginationMixin from '@/mixins/pagination'
import infoDialog from './infoDialog'
import viewDialog from '@/views/cstManagement/twoCstManagement/expenseSettlement/viewDialog'
import resizeMixin from '@/mixins/resize'
import wayInfoDialog from '@/views/cstManagement/twoCstManagement/expenseSettlement/infoDialog'
import {confirmationResults, delChargeBill, queryCollCustomer, queryServiceBills} from '@/request/api'
import isAuth from '@/mixins/buttonAuth'
import buttonName from '@/components/buttonName/button-name'

export default {
  mixins: [resizeMixin, paginationMixin, isAuth],
  data() {
    return {
      currentData: {},
      actionName: 'way',
      maxHeight: -1,
      payCustomerDropdowm: [], // 结算对象下拉
      queryParam: {
        billCode: '', // 结算单编号
        startTime: null,
        endTime: null,
        customerInfo: '' // 结算对象
      },
      // 页面结算对象表格
      wayTable: {
        data: [],
        currentData: {}
      },
      // 海运结算单
      seaTable: {
        data: [],
        currentData: {},
        pageInfo: {
          index: 1,
          size: 30,
          total: 0
        }
      },
      // 信息费结算单
      infoTable: {
        data: [],
        currentData: {},
        pageInfo: {
          index: 1,
          size: 30,
          total: 0
        }
      },
      // 查看dialog
      viewDialogData: {
        title: '',
        show: false,
        currentData: {},
        btn: '',
        btnShow: true,
        billItemTableShow: false,
        documentNoDisable: false,
        uploadFileShow: false
      },
      // 增删改查dialog
      infoDialogData: {
        title: '',
        show: false,
        currentData: {},
        tagName: ''
      },
      wayInfoDialogData: {
        title: '',
        show: false,
        tagName: '',
        currentData: {}
      }
    }
  },
  components: {
    infoDialog,
    viewDialog,
    wayInfoDialog,
    buttonName
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.tableH.offsetHeight
    }
  },
  mounted() {
    this.initMainTable()
    this.initPayCustomerDropdowm()
  },
  methods: {
    clickEvent(val) {
      if (val.mdlCode === 'viewBtn') {
        this.viewBtn()
      }
      if (val.mdlCode === 'addBtn') {
        this.addBtn()
      }
      if (val.mdlCode === 'editBtn') {
        this.editBtn()
      }
      if (val.mdlCode === 'delBtn') {
        this.delBtn()
      }
      if (val.mdlCode === 'confirmPCollect') {
        this.confirmPCollect()
      }
      if (val.mdlCode === 'print') {
        this.print()
      }
      if (val.mdlCode === 'initiateCollection') {
        this.initiateCollect()
      }
    },
    // 初始化主表
    initMainTable() {
      queryServiceBills({
        index: this.Pagination.currentPage,
        size: this.Pagination.pageSize,
        cbBillType: 'INFO',
        source: 2,
        payB: this.queryParam.customerInfo,
        cbBillNo: this.queryParam.billCode,
        startTime: this.queryParam.startTime,
        endTime: this.queryParam.endTime,
      }).then(res => {
        this.infoTable.pageInfo.total = res.total
        this.infoTable.data = res.data
      })
    },
    initPayCustomerDropdowm() {
      queryCollCustomer({}).then(res => {
        this.payCustomerDropdowm = res.data
      })
    },
    // 添加
    addBtn() {
      this.infoDialogData.title = '新增'
      this.infoDialogData.show = true
      this.infoDialogData.tagName = this.actionName
    },
    // 修改
    editBtn() {
      if (Object.keys(this.currentData).length == 0) {
        this.$message.error('请选择一项')
        return
      }
      if (parseInt(this.currentData.statusCode) > 8) {
        this.$message.error('已经被使用，无法编辑')
        return
      }
      this.infoDialogData.currentData = this.currentData
      this.infoDialogData.title = '编辑'
      this.infoDialogData.show = true
    },
    // 删除
    delBtn() {
      if (Object.keys(this.currentData).length == 0) {
        this.$message.error('请选择一项')
        return
      }
      if (this.currentData.statusCode != 1) {
        this.$message.error('已经被使用，无法删除')
        return
      }
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delChargeBill({
            cbId: this.currentData.id
          }).then(res => {
            this.$message.success('删除成功')
            this.currentData = {}
            this.initMainTable()
          })
        })
        .catch(() => {
        })
    },
    // 确认
    confirmB(status) {
      if (this.currentData.statusCode == status) {
        this.$message.error('不要重复确认')
        return
      }
      confirmationResults({
        cbId: this.currentData.id,
        status: status
      }).then(res => {
        this.$message.success('成功')
        this.initMainTable()
      })
    },
    // 收款确认
    confirmPCollect() {
      if (Object.keys(this.currentData).length == 0) {
        this.$message.error('至少选择一项')
        return
      }
      if (this.currentData.statusCode == '5') {
        this.$message.error('不要重复确认')
        return
      }
      if (parseInt(this.currentData.statusCode) != 4) {
        this.$message.error('对方未付款')
        return
      }
      this.viewDialogData.currentData = this.currentData
      this.viewDialogData.title = '收款确认'
      this.viewDialogData.currentData.interimStatus = '5'
      this.viewDialogData.btnShow = true
      this.viewDialogData.documentNoDisable = true
      this.viewDialogData.billItemTableShow = false
      this.viewDialogData.uploadFileShow = false
      this.viewDialogData.btn = '确定'
      this.viewDialogData.show = true
    },
    // 表格单选
    tableRowClick(val) {
      this.currentData = val
    },
    // 导出结算单
    print() {
      if (Object.keys(this.currentData).length == 0) {
        this.$message.error('至少选择一项')

      }
    },
    // 发起收款
    initiateCollect() {
      if (Object.keys(this.currentData).length == 0) {
        this.$message.error('至少选择一项')
        return
      }
      if (this.currentData.statusCode == '2') {
        this.$message.error('不要重复确认')
        return
      }
      if (parseInt(this.currentData.statusCode) > 1) {
        this.$message.error('已发起收款')
        return
      }
      this.viewDialogData.currentData = this.currentData
      this.viewDialogData.currentData.documents = []
      this.viewDialogData.title = '发起收款'
      this.viewDialogData.currentData.interimStatus = '2'
      this.viewDialogData.btnShow = true
      this.viewDialogData.documentNoDisable = false
      this.viewDialogData.billItemTableShow = false
      this.viewDialogData.uploadFileShow = true
      this.viewDialogData.btn = '确定'
      this.viewDialogData.show = true
    },
    // 查看详情
    viewBtn() {
      if (Object.keys(this.currentData).length == 0) {
        this.$message.error('请选择一条数据')
        return
      }
      this.viewDialogData.title = '查看'
      this.viewDialogData.currentData = this.currentData
      this.viewDialogData.btnShow = false
      this.viewDialogData.show = true
    },
    tabsClick(val) {
      this.actionName = val.name
      this.viewDialogData.tagName = val.name
      this.infoDialogData.tagName = val.name
      this.currentData = {}
      this.initMainTable()
    },
    dialogClose() {
      this.currentData = {}
      this.initPayCustomerDropdowm()
      this.initMainTable()
    }
  }
}
</script>

<style lang="scss" scoped>
.openOrder {
  height: 100%;
  width: 100%;
  padding-left: 10px;
  padding-top: 10px;

  .openOrderBox {
    height: calc(100vh - 300px);
    width: 100%;
    display: flex;

    .openOrderLeft {
      flex: 1;
    }

    .openTitle {
      font-size: 13px;
    }

    .btn {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
}
</style>
